<template>
  <div class="container">
    <div class="score-board">
      <div>黑方得分: {{ scores.black }}</div>
      <div>白方得分: {{ scores.white }}</div>
    </div>
    <div class="current-player">当前玩家: {{ currentPlayer }}</div>
    <div class="chess-board">
      <div v-for="(row, rowIndex) in board" :key="rowIndex" class="board-row">
        <div v-for="(cell, colIndex) in row" :key="colIndex" class="board-cell" :class="[
          { black: cell === 'black', white: cell === 'white' },
          { eliminated: isEliminated(rowIndex, colIndex) }
        ]" @click="handleClick(rowIndex, colIndex)"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';

type Cell = 'black' | 'white' | null;
type Board = Cell[][];
type Direction = [number, number];

const BOARD_SIZE = 15;
const board = reactive<Board>(
  Array(BOARD_SIZE).fill(null).map(() =>
    Array(BOARD_SIZE).fill(null)
  )
);

const currentPlayer = ref<'black' | 'white'>('black');
const scores = reactive({ black: 0, white: 0 });
const eliminatedCells = ref<Set<string>>(new Set());

const isEliminated = (row: number, col: number) =>
  eliminatedCells.value.has(`${row}-${col}`);

const checkFiveInRow = (
  row: number,
  col: number,
  player: Cell,
  direction: Direction
): [number, number][] => {
  if (!player) return [];

  const [dx, dy] = direction;
  const line: [number, number][] = [[row, col]];

  // 向正方向检查
  for (let i = 1; i < 5; i++) {
    const newRow = row + dx * i;
    const newCol = col + dy * i;
    if (newRow < 0 || newRow >= BOARD_SIZE ||
      newCol < 0 || newCol >= BOARD_SIZE ||
      board[newRow][newCol] !== player) break;
    line.push([newRow, newCol]);
  }

  // 向反方向检查
  for (let i = 1; i < 5; i++) {
    const newRow = row - dx * i;
    const newCol = col - dy * i;
    if (newRow < 0 || newRow >= BOARD_SIZE ||
      newCol < 0 || newCol >= BOARD_SIZE ||
      board[newRow][newCol] !== player) break;
    line.unshift([newRow, newCol]);
  }

  return line.length >= 5 ? line.slice(0, 5) : [];
};

const handleClick = (row: number, col: number) => {
  if (board[row][col] || eliminatedCells.value.size > 0) return;

  board[row][col] = currentPlayer.value;

  const directions: Direction[] = [
    [0, 1],  // 水平
    [1, 0],  // 垂直
    [1, 1],  // 主对角线
    [1, -1]  // 副对角线
  ];

  let matches: [number, number][] = [];

  for (const direction of directions) {
    const line = checkFiveInRow(row, col, currentPlayer.value, direction);
    if (line.length === 5) {
      matches = [...matches, ...line];
    }
  }

  if (matches.length > 0) {
    // 记录要消除的棋子
    matches.forEach(pos => {
      eliminatedCells.value.add(`${pos[0]}-${pos[1]}`);
    });

    // 1秒后执行消除和加分
    setTimeout(() => {
      matches.forEach(([r, c]) => {
        board[r][c] = null;
      });
      scores[currentPlayer.value]++;
      eliminatedCells.value.clear();
    }, 1000);
  }

  currentPlayer.value = currentPlayer.value === 'black' ? 'white' : 'black';
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.score-board {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  font-size: 18px;
}

.current-player {
  margin-bottom: 20px;
  font-size: 16px;
}

.chess-board {
  background: #deb887;
  padding: 10px;
  border-radius: 5px;
}

.board-row {
  display: flex;
}

.board-cell {
  width: 30px;
  height: 30px;
  border: 1px solid #8b4513;
  cursor: pointer;
  transition: background-color 0.3s;
}

.board-cell:hover {
  background-color: #f0d9b5;
}

.black {
  background-color: #000;
  border-radius: 50%;
}

.white {
  background-color: #fff;
  border-radius: 50%;
}

.eliminated {
  animation: eliminate 1s ease-in-out;
}

@keyframes eliminate {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }

  100% {
    transform: scale(0);
    opacity: 0;
  }
}
</style>
